<template>
	<view class="uni_box home">
		<navbar title='违规公示'>
		</navbar>
		<view class="content">
			<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
			<view class="lei" v-if="type==1">
				<view class="gone">
					<text class="tit">工友违规公示</text>
					<text class="mshu" v-if="tip">{{ tip }}</text>
				</view>
				<view class="gongnav">
					<view class="ghead">
						<view class="hitem" :class="leiinfo.type==item.type?'hactive':''" @click="gettype(item)" v-for="(item,index) in leilist" :key="index">{{item.name}}</view>
					</view>
					<view class="glist">
						<view class="lhead">
							<view class="lone">姓名</view>
							<view class="lone center">违规次数</view>
							<view class="lone">平台惩罚规则</view>
						</view>
						<view class="lnav" v-for="(item,index) in newlist" :key="index">
							<view class="lone">{{item.name}}</view>
							<view class="lone center lactive">{{ item.count }}</view>
							<view class="lone lactive end" style="justify-content: flex-end;">每次{{item.credit}}分</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lei" v-if="type==2">
				<view class="gone">
					<text class="tit">违规公示</text>
					<view class="tipview">
						<text class="name">平台严禁飞单,违者将被封号</text>
						<text class="jname">1.禁止获取电话号码</text>
						<text class="jname">2.禁止见面后添加微信</text>
						<text class="jname">3.禁止绕过平台进行私下交易,包括后续交易等</text>
						<text class="mshu" v-if="tip">{{tip}}</text>
					</view>
				</view>
				<view class="gongnav">
					<view class="glist">
						<view class="lhead">
							<view class="lone">姓名</view>
							<view class="lone center">违规原因</view>
							<view class="lone">平台惩罚规则</view>
						</view>
						<view class="lnav" v-for="(item,index) in list" :key="index">
							<view class="lone">{{item.name}}</view>
							<view class="lone center lactive">{{ item.type }}</view>
							<view class="lone lactive col">
								<text class="feng">{{item.fa}}</text>
								<text class="jiang">{{item.jiang}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,//1员工 2老板
				list:[],
				tip:'',
				leilist:[],
				leiinfo:{},
				newlist:[]
			}
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type
			}
			if(this.type == 1){
				this.getclass()
			}else if(this.type == 2){
				this.getList()
			}
			
		},
		onShow() {
		},
		methods: {
			gettype(e){
				this.leiinfo = e
				this.getyglist()
			},
			async getclass(){
				
				let res = await this.$u.api.getWgByGongrenType({
				});
				this.leilist = res
				this.leiinfo = res[0]
				this.getyglist()
			},
			async getyglist(){
				
				let res = await this.$u.api.getWgByGongren({
					type:this.leiinfo.type
				});
				this.newlist = res.list
				this.tip = res.tip
			},
			async getList(){
				
				let res = await this.$u.api.getWgByBoss({
				});
				this.list = res.list
				this.tip = res.tip
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5f5f5;
	}
	.lei{
		position: relative;
	}
	.content{
		background-color: #F5f5f5;
		padding-bottom: 40rpx;
		.bghome{
			width: 100%;
			position: absolute;
			top: 0;
			height: 550rpx;
			
		}
		.gone{
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
		}
		.tit{
			color: #000;
			font-size: 50rpx;
			font-weight: 500;
			display: block;
		}
		.mshu{
			display: block;
			margin-top: 20rpx;
			color: red;
			font-size: 28rpx;
			font-weight: 400;
		}
		.tipview{
			// margin: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			position: relative;
			.name{
				color: #FF8F39;
				font-weight: 500;
				font-size: 40rpx;
				display: block;
				margin-bottom: 30rpx;
			}
			.jname{
				color: #333;
				font-weight: 400;
				display: block;
				margin-bottom: 6rpx;
			}
		}
		.gongnav{
			margin: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			position: relative;
			.ghead{
				display: flex;
				flex-direction: row;
				margin-bottom: 30rpx;
				.hitem{
					padding: 10rpx 40rpx;
					background-color: #f5f5f5;
					color: #333;
					margin-right: 20rpx;
					border-radius: 50rpx;
				}
				.hactive{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
				}
			}
		}
		.glist{
			display: flex;
			flex-direction: column;
			.lhead{
				display: flex;
				flex-direction: row;
				.lone{
					padding: 20rpx 0;
					width: 33.33%;
					border-bottom: 1rpx solid #eee;
					color: #333;
					font-size: 28rpx;
					font-weight: 500;
				}
				.lone:last-child{
					// display: flex;
					text-align: right;
					justify-content: end;
				}
			}
			.end{
				justify-content: end;
			}
			.lnav{
				display: flex;
				flex-direction: row;
				.lone{
					padding: 20rpx 0;
					width: 33.33%;
					border-bottom: 1rpx solid #eee;
					color: #333;
					font-size: 28rpx;
					font-weight: 400;
					display: flex;
					align-items: center;
				}
				.lone:last-child{
					// display: flex;
					text-align: right;
				}
				.lactive{
					color: red;
				}
				.col{
					display: flex;
					flex-direction: column;
					// justify-content: end;
					align-items: end;
					.feng{
						color: #FF8F39;
						font-size: 28rpx;
						font-weight: 400;
					}
					.jiang{
						color: #666;
						font-size: 26rpx;

					}
				}
			}
			.center{
				text-align: center;
				justify-content: center;
			}
		}

	}
</style>
